<template>
  <div class="message-container">
    <div class="stance">
      <!-- <u-avatar icon="star-fill" fontSize="22"></u-avatar> -->
      <view class="avatar">
        <u-image
          src="/static/images/logo@2x.png"
          shape="circle"
          mode="aspectFit"
          width="32px"
          height="32px"
        ></u-image>
      </view>
    </div>
    <div class="content">
      <div class="message">
        <div>
          <u-image
            v-for="(item, index) in fileList"
            :key="index"
            :show-loading="true"
            :src="item.fileUrl"
            @click="click"
          ></u-image>
        </div>

        <text selectable="true">
          <MarkdownRenderer :content="data && data[current]?.context">
          </MarkdownRenderer>
        </text>
        <!-- <div>
            {{data[current]?.context}}
          </div> -->

        <div class="align-items_center justify_between mt_sm">
          <div></div>
          <div class="align-items_center gap_xs">
            <view v-if="count > 1" class="flex align-items_center gap_xs">
              <u-icon
                name="arrow-left"
                size="16"
                class="pointer"
                @click="handlePrev()"
              ></u-icon>
              <view>{{ current + 1 }}/{{ count }}</view>
              <u-icon
                name="arrow-right"
                size="16"
                class="pointer"
                @click="handleNext()"
              ></u-icon>
            </view>
            <u-button
              shape="circle"
              size="small"
              @click="handleCopy(data[current].context)"
            >
              <u-icon
                name="fuzhi"
                custom-prefix="icon"
                @click="handleSend"
                size="32"
              ></u-icon>
            </u-button>
            <u-button
              v-if="hasRebuild"
              shape="circle"
              size="small"
              @click="handleRebuild"
            >
              <u-icon
                name="shuaxin"
                custom-prefix="icon"
                @click="handleSend"
                size="32"
              ></u-icon>
            </u-button>
            <!-- <u-button
              shape="circle"
              size="small"
              icon="share-square"
            ></u-button> -->
          </div>
        </div>
      </div>
    </div>
    <div class="stance"></div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, ref } from 'vue';
import useChatStore from '@/store/modules/chat';
import MarkdownRenderer from '@/components/MarkdownRenderer/index.vue';
export default defineComponent({
  name: 'MessageBot',
  components: {
    MarkdownRenderer,
  },
  props: {
    role: {
      type: String,
      required: true,
    },
    question: {
      type: Object,
      required: true,
      default: () => ({}),
    },
    data: {
      type: Array,
      required: true,
      default: () => [],
    },
    hasRebuild: {
      type: Boolean,
      required: true,
      default: false,
    },
  },
  setup(props, { emit }) {
    const chatStore = useChatStore();
    const current = ref(0);
    const count = ref(props.data.length || 0);
    function handlePrev() {
      const result = current.value - 1;
      if (result >= 0) {
        current.value = result;
      }
    }
    function handleNext() {
      const result = current.value + 1;
      if (result < props.data.length) {
        current.value = result;
      }
    }

    function handleRebuild() {
      current.value = count.value;
      count.value = count.value + 1;
      chatStore.generate({
        msg: props.question.context,
        addFileList: [],
        type: 1,
      });
    }

    const fileList = computed(() => {
      const conversation = props.data[current.value];
      if (!conversation) {
        return [];
      }
      return conversation.fileList || [];
    });

    const handleCopy = (data: string) => {
      uni.setClipboardData({
        data: data,
        success: function (res) {
          uni.getClipboardData({
            success: function (res) {
              uni.showToast({
                title: '复制成功',
              });
            },
          });
        },
      });
    };

    return {
      current,
      count,
      fileList,
      handlePrev,
      handleNext,
      handleRebuild,
      handleCopy,
    };
  },
});
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';

.message-container {
  display: flex;
  align-items: flex-start;
  gap: $space;
  & + .message-container {
    margin-top: $space;
  }

  @media screen and (max-width: 576px) {
    flex-direction: column;
    align-items: flex-start;
    gap: map-get($spaces, xs);
  }

  &.reverse {
    // flex-direction: row-reverse;
    .content {
      justify-content: flex-end;
    }

    .message {
      display: inline-block;
      width: unset;
      border-radius: $radius;
      border-top-right-radius: unset;
      background: map-get($theme-colors, primary);
      color: $white-color;
    }
  }
  .content {
    flex: 1;
    display: flex;
    justify-content: flex-start;
  }
  .message {
    display: block;
    width: 100%;
    background: $white-color;
    color: $black-color;
    padding: map-get($spaces, sm);
    border-radius: $radius;
    border-top-left-radius: unset;
  }
  .stance {
    width: 40px;
  }
}

.avatar {
  background: $white-color;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
